import { BaseComp } from '../../../common/component/comp';

import events from './events';
import { z, layouts, paths, assets, color, loadFont } from './layout';
import { Candidate, PHASE_SEND_DANMU } from './lottery';

class HPBar extends BaseComp {
  /** 说明文字, 发送啥弹幕参与抽奖 */
  spTitle = null;
  /** 参与人数几个字 */
  spTxCanyu = null;
  /** 参与人数 显示数字 */
  spTxCandidates = [];
  txCandidateScale = 1;
  /** 血条图案 */
  spImg1 = null;

  constructor(args) {
    super(args.parent);
    this.zrender = args.zrender;
    this.zr = args.zr;

    this.layout = layouts.hpbar;
    this.x = this.layout.x;
    this.y = this.layout.y;

    this.fontLoad = loadFont(assets.fontFangZhengFunc(this.getContext()));

    this.on(events.CANDIDATE_ADDED, this.onCandidateAdded.bind(this));
    this.on(events.WORDS_UPDATED, this.onWordsUpdated.bind(this));
    this.on(events.PHASE_RESET, this.onReset.bind(this));
    this.on(events.PHASE_BEGIN, this.onBegin.bind(this));
    this.on(events.PHASE_END, this.onEnd.bind(this));
    this.on(events.PHASE_READY, this.onReady.bind(this));
    this.on(events.PHASE_PICKED, this.onPicked.bind(this));
  }

  init() {
    const [x, y] = this.absolutePos();
    const { zr, zrender } = this;
    this.fontLoad.then(() => {
      zr.add(this.spTitle = new zrender.Text({
        position : [x + this.layout.title.x, y + this.layout.title.y],
        style : {
          fontFamily : 'FangZheng',
          text : '',
          fontSize : 28,
          fontStyle : 'italic',
          textFill: '#FFF',
          textAlign: 'left',
          textVerticalAlign: 'top',
          textShadowColor : '#000',
          textShadowBlur : 4,
          textShadowOffsetX : 3,
          textShadowOffsetY : 3,
        },
        z : z.hpbar.title
      }));
    });
    zr.add(this.spImg1 = new zrender.Image({
      position : [x, y],
      style : {
        image : assets.hpBarFunc(this.getContext()),
      },
      scale : [0.5, 0.5],
      z : z.hpbar.img[0],
    }));

    const spTxCanyu = this.spTxCanyu = zrender.path.createFromString(paths.canyu, {
      position : [x + this.layout.txCanyu.x, y + this.layout.txCanyu.y],
      style : {
        fill : color.normal,
        shadowColor : color.dark2,
        shadowOffsetX : 2,
        shadowOffsetY : 2,
      },
      z : z.hpbar.title
    });
    let bound = spTxCanyu.getBoundingRect();
    let scale = [this.layout.txCanyu.height / bound.height];
    spTxCanyu.attr({ scale: [scale, scale] });
    zr.add(spTxCanyu);

    const figures = zrender.path.createFromString(paths['0'], {
      position : [x + this.layout.txCandidates.x, y + this.layout.txCandidates.y],
      style : {
        fill : color.normal,
        shadowColor : color.dark2,
        shadowOffsetX : 2,
        shadowOffsetY : 2,
      },
      z : z.hpbar.title
    });
    bound = figures.getBoundingRect();
    this.txCandidateScale = [this.layout.txCandidates.height / bound.height];
    figures.attr({ scale: [this.txCandidateScale, this.txCandidateScale] });
    this.spTxCandidates.push(figures);
    zr.add(figures);

    // spTxCandidates
  }

  /** @returns {Candidate[]} */
  getParticipants() {
    return this.root.lottery.participants;
  }

  getWords() {
    return this.root.lottery.words;
  }

  isAnyWords() {
    return this.root.lottery.any;
  }

  getPhase() {
    return this.root.lottery.phase;
  }

  onCandidateAdded() {
    this.onBegin();
  }

  onWordsUpdated(_, param) {
    if (this.getPhase() != PHASE_SEND_DANMU) {
      return;
    }

    let words = param.words;
    let any = param.any;
    let text = '';

    if (any) {
      text = '发送任意弹幕参与抽奖' + text;
    } else {
      text = `发送【${words}】参与抽奖` + text;
    }

    this.spTitle.attr({ style : {text} });
  }

  onBegin() {
    this.onWordsUpdated(null, {
      words : this.getWords(),
      any : this.isAnyWords(),
    });
    this.updateCandidateFigures(this.getParticipants().length);
  }

  onEnd() {
    let cs = this.getParticipants();
    this.spTitle && this.spTitle.attr({ style : {text : `共 ${cs.length} 位参与者`} });
  }

  onReset() {
    this.spTitle && this.spTitle.attr({ style : {text : ''} });
    this.updateCandidateFigures(0);
  }

  onReady() {
    this.spTitle && this.spTitle.attr({ style : {text : '看看谁是幸运儿'} });
  }

  onPicked(_, param) {
    /** @type {Candidate} */
    const chosen = param.chosen;
    this.spTitle && this.spTitle.attr({ style : {text : `恭喜 【${chosen.uname}】`} });
  }

  updateCandidateFigures(count) {
    const {zr, zrender} = this;
    const [x, y] = this.absolutePos();
    this.spTxCandidates.forEach(sp => zr.remove(sp));
    this.spTxCandidates = [];

    let text = count + "";
    for (let i = 0; i < text.length; i++) {
      let figure = text[i];

      const figures = zrender.path.createFromString(paths[figure], {
        position : [x + this.layout.txCandidates.x + i * this.layout.txCandidates.offsetX, y + this.layout.txCandidates.y],
        style : {
          fill : color.normal,
          shadowColor : color.dark2,
          shadowOffsetX : 2,
          shadowOffsetY : 2,
        },
        scale : [this.txCandidateScale, this.txCandidateScale],
        z : z.hpbar.title
      });
      this.spTxCandidates.push(figures);
      zr.add(figures);
    }
  }
}

export {
  HPBar
};
